"use client";
import { cn } from "@/lib/utils";
import { LockIcon, User2Icon } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function ProfileLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const t = useTranslations("profilePages");
  const links = [
    {
      name: t("profile"),
      href: "/profile",
      icon: User2Icon,
    },
    {
      name: t("password"),
      href: "/profile/password",
      icon: LockIcon,
    },
  ];
  const pathname = usePathname();
  return (
    <div className="flex flex-row w-full max-w-3xl border border-foreground/5 shadow-md rounded-lg">
      <div className="h-full w-10 sm:w-32 bg-muted py-4">
        {links.map((link) => {
          return (
            <Link
              key={link.name}
              href={link.href}
              className={cn(
                "flex items-center justify-between cursor-pointer p-3 text-muted-foreground hover:text-primary",
                {
                  "bg-background": pathname === link.href,
                }
              )}
            >
              <div
                className={cn("hidden sm:block", {
                  "text-primary font-bold": pathname === link.href,
                })}
              >
                {link.name}
              </div>
              <link.icon
                className={cn({
                  "text-primary": pathname === link.href,
                })}
                size={16}
              />
            </Link>
          );
        })}
      </div>
      <div className="flex-1 flex flex-col items-center justify-center gap-6 py-12 px-10">
        {children}
      </div>
    </div>
  );
}
